<div class="ibox">
    <div class="ibox-title">
        <h5>
            <vc:i18n name="语音催缴" namespace="ttsOweFeeCallable"></vc:i18n>
        </h5>
        <div class="ibox-tools" style="top:10px;">
            <button type="button" class="btn btn-white btn-sm" v-on:click="_backTtsOweFee()">
                <vc:i18n name="返回" namespace="ttsOweFeeCallable"></vc:i18n>
            </button>
            <button type="button" class="btn btn-primary btn-sm" v-on:click="_openChooseTtsAndStart()">
                <vc:i18n name="开始催缴" namespace="ttsOweFeeCallable"></vc:i18n>
            </button>
        </div>
    </div>
    <div class="ibox-content">
        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
            <thead>
                <tr>
                    <th class="text-center">
                        <vc:i18n name='房屋' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='业主' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='手机号' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='费用' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='欠费时间段' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='欠费金额' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='状态' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                    <th class="text-center">
                        <vc:i18n name='操作' namespace='ttsOweFeeCallable'></vc:i18n>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="oweFee in ttsOweFeeCallableInfo.oweFees">
                    <td class="text-center" style="white-space: nowrap;">{{oweFee.payerObjName}}</td>
                    <td class="text-center">{{oweFee.ownerName}}</td>
                    <td class="text-center">{{oweFee.ownerTel}}</td>
                    <td class="text-center">{{oweFee.configName}}</td>
                    <td class="text-center">{{oweFee.endTime}}~{{oweFee.deadlineTime}}</td>
                    <td class="text-center">{{oweFee.amountOwed}}</td>
                    <td class="text-center" v-if="oweFee.state == 'W'">待催缴</td>
                    <td class="text-center" v-else-if="oweFee.state == 'D'">催缴中</td>
                    <td class="text-center" v-else-if="oweFee.state == 'C'">催缴完成</td>
                    <td class="text-center" v-else="oweFee.state == 'F'">催缴失败</td>
                    <td class="text-center">
                        <div class="btn-group">
                            <button class="btn-white btn btn-xs" v-if="oweFee.state == 'F'"
                                v-on:click="_restartTtsOweFee(oweFee)">
                                <vc:i18n name='重新呼叫'></vc:i18n>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button class="btn-white btn btn-xs" v-on:click="_removeOweFee(oweFee)">
                                <vc:i18n name='删除'></vc:i18n>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <vc:create path="frame/pagination"></vc:create>
    </div>
    <div class="modal fade" id="chooseTelTtsModel" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <vc:i18n name="选择语音" namespace="ttsOweFeeCallable"></vc:i18n>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">
                            <vc:i18n name='播放语音' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <div class="col-sm-9">
                            <select class="custom-select" v-model="ttsOweFeeCallableInfo.ttsPath">
                                <option selected disabled value="">{{vc.i18n('必填，请选择催缴语音','addTelTts')}}</option>
                                <option :value="item.ttsPath" v-for="(item,index) in ttsOweFeeCallableInfo.tts">
                                    {{item.ttsName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">
                            <vc:i18n name='下发短信' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <div class="col-sm-9">
                            <select class="custom-select" v-model="ttsOweFeeCallableInfo.sendFlag">
                                <option selected disabled value="">{{vc.i18n('必填，请选择是否下发短信','addTelTts')}}</option>
                                <option value="Y">是</option>
                                <option value="N">否</option>

                            </select>
                        </div>
                    </div>
                    <div class="form-group row" v-if="ttsOweFeeCallableInfo.sendFlag == 'Y'">
                        <label class="col-sm-3 col-form-label text-right">
                            <vc:i18n name='短信内容' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <div class="col-sm-9">
                            <textarea v-model="ttsOweFeeCallableInfo.sendMsg"
                                :placeholder="vc.i18n('必填，请填写短信内容','addTelTts')" class="form-control"></textarea>
                            <span>
                                尊敬的业主，您${house}的物业相关费用账单已生成，账单日期${date}至${date2}，缴费金额：${mount}元，请及时缴费
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="_startTtsOweFeeModal()">
                        <vc:i18n name="开始催缴" namespace="ttsOweFeeCallable"></vc:i18n>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="ttsOweFeeCallableModel" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <vc:i18n name="正在催缴中" namespace="ttsOweFeeCallable"></vc:i18n>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='房屋' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.payerObjName}}
                        </label>
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='业主' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.ownerName}}
                        </label>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='手机号' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.ownerTel}}
                        </label>
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='费用' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.configName}}
                        </label>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='金额' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.amountOwed}}
                        </label>
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='有效期' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-4 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.endTime}}~{{ttsOweFeeCallableInfo.curOweFee.deadlineTime}}
                        </label>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right">
                            <vc:i18n name='进度' namespace='ttsOweFeeCallable'></vc:i18n>
                        </label>
                        <label class="col-sm-10 col-form-label">
                            {{ttsOweFeeCallableInfo.curOweFee.stateName}}
                            <span v-if="ttsOweFeeCallableInfo.callState == 'callWait'">(等待呼叫)</span>
                            <span v-if="ttsOweFeeCallableInfo.callState == 'callTel'">(开始呼叫)</span>
                            <span v-if="ttsOweFeeCallableInfo.callState == 'TalkingStart'">(接通并播放语音)</span>
                            <span v-if="ttsOweFeeCallableInfo.callState == 'TalkingEnd'">(挂断)</span>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" @click="_stopOweFee()">
                        <vc:i18n name="暂停催缴" namespace="ttsOweFeeCallable"></vc:i18n>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>